<div *ngIf="builder$ | async as builder; else loading">
  <form class="form-horizontal" novalidate (ngSubmit)="deployStream()">
    <div>
      <div class="tab-pane">
        <app-stream-deploy-builder-errors [errors]="builder.errors" (removeError)="removeError($event)">
        </app-stream-deploy-builder-errors>
        <div class="builder" [formGroup]="builder.formGroup">

          <div class="col-fixed col-key">

            <!-- 0 -->
            <div class="line-head">
            </div>

            <!-- 1 -->
            <div class="line-toggle">
              <a class="toggle" (click)="state.platform = !state.platform">
                <clr-icon shape="angle" [class.active]="state.platform"></clr-icon>
                Platform
              </a>
            </div>

            <!-- 2 -->
            <div class="line-body" *ngIf="state.platform">
              <div class="status" *ngIf="builder.formGroup.get('platform').invalid">
                <!--                TODO-->
                <!--                <div tooltipPlacement="right"-->
                <!--                     [tooltip]="tooltipTemplate"-->
                <!--                     class="fa fa-warning"></div>-->
                <!--                <ng-template #tooltipTemplate>-->
                <!--                  <div [innerHtml]="'The define platform is not valid (unknown)'"></div>-->
                <!--                </ng-template>-->
              </div>
              <div class="form-control form-control-label">
                Platform
              </div>
            </div>

            <!-- 3 -->
            <div class="line-toggle">
              <a class="toggle" (click)="state.deployer = !state.deployer">
                <clr-icon shape="angle" [class.active]="state.deployer"></clr-icon>
                Generic Deployer Properties
              </a>
            </div>

            <!-- 4 -->
            <div *ngIf="state.deployer">
              <div class="line-body" *ngFor="let deployer of builder.streamDeployConfig.deployers;let i = index">

                <div class="status" *ngIf="builder.formGroup.get('deployers').controls[i].invalid">
                  <!--                TODO-->
                  <!--                  <div tooltipPlacement="right"-->
                  <!--                       [tooltip]="tooltipTemplate"-->
                  <!--                       class="fa fa-warning"></div>-->
                  <!--                  <ng-template #tooltipTemplate>-->
                  <!--                    <div-->
                  <!--                      [innerHtml]="tooltip(builder.streamDeployConfig, builder.formGroup.get('deployers').controls[i])"></div>-->
                  <!--                  </ng-template>-->
                </div>

                <div class="form-control form-control-label">
                  {{deployer.name}}
                </div>
              </div>
            </div>

            <!-- 5 -->
            <div class="line-toggle">
              <div class="help">
                <!--                TODO-->
                <!--                <span class="fa fa-question-circle" tooltipPlacement="right" [tooltip]="tooltipTemplate"></span>-->
                <!--                <ng-template #tooltipTemplate>-->
                <!--                  <div>-->
                <!--                    <div><strong>Example:</strong></div>-->
                <!--                    <div>Key: <strong>cloudfoundry.services</strong></div>-->
                <!--                    <div>Value (application <strong>jdbc</strong>): <strong>mysqlcups</strong></div>-->
                <!--                    <div>Generated property: <strong>deployer.jdbc.cloudfoundry.services=mysqlcups</strong></div>-->
                <!--                  </div>-->
                <!--                </ng-template>-->
              </div>


              <a class="toggle" (click)="state.specificPlatform = !state.specificPlatform">
                <clr-icon shape="angle" [class.active]="state.specificPlatform"></clr-icon>
                Deployment Platform
                <!--
                <span *ngIf="builder.formGroup.get('platform').value">
                  ({{builder.formGroup.get('platform').value}})
                </span>
                -->
              </a>
            </div>

            <!-- 6 -->
            <div *ngIf="state.specificPlatform">
              <div *ngIf="builder.builderDeploymentProperties.global.length > 0"
                   class="line-body">
                <div class="form-control form-control-label">
                  Properties
                </div>
              </div>
            </div>
            <div *ngIf="state.specificPlatform"
                 formArrayName="specificPlatform">
              <div class="line-body" *ngFor="let f of builder.formGroup.get('specificPlatform').controls;let i = index"
                   [formGroupName]="i"
                   [class.has-error]="builder.formGroup.get('specificPlatform').controls[i].get('property').invalid">
                <div class="status" *ngIf="builder.formGroup.get('specificPlatform').controls[i].invalid">

                  <!--                TODO-->
                  <!--                  <div tooltipPlacement="right"-->
                  <!--                       [tooltip]="tooltipTemplate"-->
                  <!--                       class="fa fa-warning"></div>-->
                  <!--                  <ng-template #tooltipTemplate>-->
                  <!--                    <div-->
                  <!--                      [innerHtml]="tooltip(builder.streamDeployConfig, builder.formGroup.get('specificPlatform').controls[i])"></div>-->
                  <!--                  </ng-template>-->
                </div>

                <input tabindex="{{50 + i}}" placeholder="Enter a value" class="clr-input"
                       formControlName="property" type="text"/>
              </div>
            </div>

            <!-- 7 -->
            <div class="line-toggle">
              <a class="toggle" (click)="state.app = !state.app">
                <clr-icon shape="angle" [class.active]="state.app"></clr-icon>
                Applications Properties
              </a>
            </div>

            <!-- 8 -->
            <div *ngIf="state.app">
              <div class="line-body">

                <div class="status" *ngIf="builder.formGroup.get('appsVersion').invalid">

                  <!--                TODO-->
                  <!--                  <div tooltipPlacement="right"-->
                  <!--                       [tooltip]="tooltipTemplate"-->
                  <!--                       class="fa fa-warning"></div>-->
                  <!--                  <ng-template #tooltipTemplate>-->
                  <!--                    <div-->
                  <!--                      [innerHtml]="tooltip(builder.streamDeployConfig, builder.formGroup.get('appsVersion'))"></div>-->
                  <!--                  </ng-template>-->
                </div>

                <div class="form-control form-control-label">
                  Version
                </div>
              </div>
              <div class="line-body">
                <div class="form-control form-control-label">
                  Properties
                </div>
              </div>
              <div formArrayName="global">
                <div class="line-body" *ngFor="let f of builder.formGroup.get('global').controls;let i = index"
                     [formGroupName]="i"
                     [class.has-error]="builder.formGroup.get('global').controls[i].get('property').invalid">

                  <div class="status" *ngIf="builder.formGroup.get('global').controls[i].invalid">

                    <!--                TODO-->
                    <!--                    <div tooltipPlacement="right"-->
                    <!--                         [tooltip]="tooltipTemplate"-->
                    <!--                         class="fa fa-warning"></div>-->
                    <!--                    <ng-template #tooltipTemplate>-->
                    <!--                      <div-->
                    <!--                        [innerHtml]="tooltip(builder.streamDeployConfig, builder.formGroup.get('global').controls[i])"></div>-->
                    <!--                    </ng-template>-->
                  </div>

                  <input tabindex="{{102 + i}}" placeholder="Enter a value" class="clr-input"
                         formControlName="property" type="text"/>
                </div>
              </div>
            </div>

          </div>

          <div class="col-fixed global">

            <!-- 0 -->
            <div class="line-head">
              Global
            </div>

            <!-- 1 -->
            <div class="line-toggle"></div>

            <!-- 2 -->
            <div class="line-body" *ngIf="state.platform"
                 [class.has-error]="isErrorPlatform(builder.streamDeployConfig.platform.values, builder.formGroup.get('platform').value)">
              <clr-select-container style="margin-top:0;">
                <select tabindex="1" formControlName="platform" clrSelect>
                  <option value="">Select a value</option>
                  <option *ngFor="let platform of builder.streamDeployConfig.platform.values" [value]="platform.key">
                    {{platform.name}}
                    ({{platform.type}})
                  </option>
                  <option
                    *ngIf="isInvalidPlatform(builder.streamDeployConfig.platform.values, builder.formGroup.get('platform').value)"
                    [value]="builder.formGroup.get('platform').value">
                    {{builder.formGroup.get('platform').value}} (invalid)
                  </option>
                </select>
              </clr-select-container>
            </div>

            <!-- 3 -->
            <div class="line-toggle"></div>

            <!-- 4 -->
            <div formArrayName="deployers" *ngIf="state.deployer">
              <div [formGroupName]="i" class="line-body"
                   *ngFor="let deployer of builder.streamDeployConfig.deployers; let i = index"
                   [class.has-error]="builder.formGroup.get('deployers').controls[i].get('global').invalid">

                <input tabindex="{{2 + i}}" placeholder="Enter a number" formControlName="global" class="clr-input"
                       [class.form-control-number]="deployer.suffix" type="text"/>
                <span class="placeholder-unit">{{deployer.suffix}}</span>
              </div>
            </div>

            <!-- 5 -->
            <div class="line-toggle"></div>

            <div class="line-body"
                 *ngIf="state.specificPlatform && builder.builderDeploymentProperties.global.length > 0">
              <div class="form-control form-control-label">
                <strong>{{getDeploymentProperties(builder.builderDeploymentProperties).length}}</strong>
                <span> /</span> {{builder.builderDeploymentProperties.global.length}} properties
                <button tabindex="{{101}}" type="button" (click)="openDeploymentProperties(builder)"
                        class="btn btn-sm btn-secondary">
                  Edit
                </button>
              </div>
            </div>

            <!-- 6 -->
            <div *ngIf="state.specificPlatform"
                 formArrayName="specificPlatform">
              <div class="line-body" *ngFor="let f of builder.formGroup.get('specificPlatform').controls;let i = index"
                   [formGroupName]="i"
                   [class.has-error]="builder.formGroup.get('specificPlatform').controls[i].get('global').invalid">
                <input tabindex="{{50 + i}}" placeholder="Enter a value" class="clr-input" formControlName="global"
                       type="text"/>
              </div>
            </div>

            <!-- 7 -->
            <div class="line-toggle"></div>

            <!-- 8 -->
            <div *ngIf="state.app">
              <div class="line-body"></div>
              <div class="line-body"></div>
              <div formArrayName="global">
                <div class="line-body" *ngFor="let f of builder.formGroup.get('global').controls;let i = index"
                     [formGroupName]="i"
                     [class.has-error]="builder.formGroup.get('global').controls[i].get('global').invalid">
                  <input tabindex="{{102 + i}}" placeholder="Enter a value" class="clr-input"
                         formControlName="global" type="text"/>
                </div>
              </div>
            </div>

          </div>

          <div class="scroll">

            <div class="col" *ngFor="let app of builder.streamDeployConfig.apps">

              <!-- 0 -->
              <div class="line-head">
                <strong>{{app.name}}</strong>
                <br/>
                <span class="label label-app {{app.type}}">{{app.origin}}</span>
                <!--                TODO-->
                <!--                <app-type [application]="app"></app-type>-->
              </div>

              <!-- 1 -->
              <div class="line-toggle"></div>

              <!-- 2 -->
              <div class="line-body" *ngIf="state.platform"></div>

              <!-- 3 -->
              <div class="line-toggle"></div>

              <!-- 4 -->
              <div formArrayName="deployers" *ngIf="state.deployer">
                <div [formGroupName]="i" class="line-body"
                     *ngFor="let deployer of builder.streamDeployConfig.deployers; let i = index"
                     [class.has-error]="builder.formGroup.get('deployers').controls[i].get(app.name).invalid">
                  <input tabindex="{{2 + i}}" placeholder="Enter a number" [formControlName]="app.name"
                         class="clr-input"
                         [class.form-control-number]="deployer.suffix" type="text"/>
                  <span class="placeholder-unit">{{deployer.suffix}}</span>
                </div>
              </div>

              <!-- 5 -->
              <div class="line-toggle"></div>

              <!-- 6 -->
              <!-- track visibility from global as those are same as per apps -->
              <div class="line-body"
                   *ngIf="state.specificPlatform && builder.builderDeploymentProperties.global.length > 0">
                <div class="form-control form-control-label">
                  <strong>{{getDeploymentProperties(builder.builderDeploymentProperties, app.name).length}}</strong>
                  <span> /</span> {{builder.builderDeploymentProperties.apps[app.name].length}} properties
                  <button tabindex="{{101}}" type="button" (click)="openDeploymentProperties(builder, app.name)"
                          class="btn btn-sm btn-secondary">
                    Edit
                  </button>
                </div>
              </div>

              <div *ngIf="state.specificPlatform"
                   formArrayName="specificPlatform">
                <div class="line-body"
                     *ngFor="let f of builder.formGroup.get('specificPlatform').controls;let i = index"
                     [formGroupName]="i"
                     [class.has-error]="builder.formGroup.get('specificPlatform').controls[i].get(app.name).invalid">
                  <input tabindex="{{50 + i}}" placeholder="Enter a value" class="clr-input"
                         [formControlName]="app.name" type="text"/>
                </div>
              </div>

              <!-- 7 -->
              <div class="line-toggle"></div>

              <!-- 8 -->
              <div *ngIf="state.app">
                <div class="line-body" [class.has-error]="app.optionsState.isInvalid">
                  <div formGroupName="appsVersion">
                    <div class="cell">
                      <clr-select-container style="margin-top:0;">
                        <select tabindex="{{100}}" [formControlName]="app.name" clrSelect>
                          <option value="">Default version ({{app.version}})</option>
                          <option *ngFor="let version of app.versions" [value]="version.version">
                            {{version.version}}
                          </option>
                          <option *ngIf="app.optionsState.isInvalid"
                                  [value]="builder.formGroup.get('appsVersion').get(app.name).value">
                            {{builder.formGroup.get('appsVersion').get(app.name).value}} (invalid)
                          </option>
                        </select>
                      </clr-select-container>
                    </div>
                  </div>
                </div>
                <div class="line-body" [class.has-error]="app.optionsState.isInvalid">
                  <div
                    *ngIf="app.options && !app.optionsState.isLoading && !app.optionsState.isOnError && !app.optionsState.isInvalid"
                    class="form-control form-control-label">
                    <div *ngIf="app.options.length > 0">
                      <strong>{{getAppProperties(builder.builderAppsProperties, app.name).length}}</strong>
                      <span> /</span> {{app.options.length}} properties
                      <button tabindex="{{101}}" type="button" (click)="openApp(builder, app)"
                              class="btn btn-sm btn-secondary">
                        Edit
                      </button>
                    </div>
                    <div *ngIf="app.options.length == 0">
                      <strong>No properties</strong>
                    </div>
                  </div>
                  <div *ngIf="app.optionsState.isLoading" class="form-control form-control-label">
                    Loading ...
                  </div>
                  <div *ngIf="app.optionsState.isOnError" class="form-control form-control-label">
                    Error loading
                  </div>
                  <div *ngIf="app.optionsState.isInvalid" class="form-control form-control-label">
                    Invalid version
                  </div>
                </div>
                <div formArrayName="global">
                  <div class="line-body" *ngFor="let f of builder.formGroup.get('global').controls;let i = index"
                       [formGroupName]="i"
                       [class.has-error]="builder.formGroup.get('global').controls[i].get(app.name).invalid">
                    <input tabindex="{{102 + i}}" placeholder="Enter a value" class="clr-input"
                           [formControlName]="app.name" type="text"/>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="btn-group builder-actions-1">
          <button tabindex="200" id="btn-export" type="button" class="btn btn-sm btn-secondary" (click)="exportProps()">
            Export
          </button>
          <button tabindex="200" id="btn-copy" type="button" class="btn btn-sm btn-secondary" (click)="copyToClipboard()">
            Copy to Clipboard
          </button>
        </div>
        <div>
          <a tabindex="200" id="btn-cancel" class="btn btn-default" routerLink="/streams/list">Cancel</a>
          <button tabindex="200" id="btn-deploy-builder" type="submit" class="btn btn-primary">
            <span *ngIf="!isDeployed">Deploy stream</span>
            <span *ngIf="isDeployed">Update stream</span>
          </button>
        </div>
      </div>
    </div>
  </form>
</div>

<app-properties-dialog-content #appPropertiesModal></app-properties-dialog-content>
<app-properties-groups-dialog-content #groupsPropertiesModal></app-properties-groups-dialog-content>

<ng-template #loading>
  <!--  <app-loader></app-loader>-->
</ng-template>
